<template>
  <div class="settings-item">
    <div class="header">
      <div class="title">
        工具调用
        <Tooltip
          transfer
          theme="light"
          placement="bottom"
          max-width="400"
          content="提示"
        >
          <Icon type="ios-help-circle-outline" />
        </Tooltip>
      </div>
      <div class="actions">
        <text-button type="normal" icon="md-add" @click="visible=true">选择</text-button>
      </div>
    </div>
    <div class="content">
      <div class="knowledge-list">
        <div class="knowledge-item" v-for="item in confirmSelectToolList" :key="item.id">{{ item.name }}</div>
      </div>
    </div>
  </div>
  <CommonDialog title="工具调用"  v-model="visible" :confirmLoading="loading" >
    <div class="tools">
      <div class="tool-item" v-for="(item, i) in toolList" :key="i" >
        <span>{{ item.name }}</span>
        <Button type="error" ghost icon="ios-trash" @click="handleRemove(item)" v-if="selectTools.includes(item.id)">移除</Button>
        <Button type="plain" icon="md-add" @click="handleSelect(item)" v-else>添加</Button>
      </div>
    </div>
    <template #footer>
      <Button @click="visible=false">取消</Button>
      <Button type="primary" @click="submit">确认</Button>
    </template>
  </CommonDialog>
</template>
<script setup>
import { ref } from 'vue';
import CommonDialog from '@/components/CommonDialog/index.vue';
import { listTools } from '@/api/modules/agent';

const props = defineProps({
  form: {
    type: Object,
    default: () => {}
  }
})
const emit = defineEmits(['submit'])

// 弹窗显示
const visible = ref(false);
const loading = ref(false);
const toolList = ref([]);
const selectTools = ref([])
const selectToolList = ref([])
const confirmSelectToolList = ref([])

const getToolsList = async() => {
  const { data } = await listTools();
  toolList.value = data;
}
getToolsList()

const handleSelect = (item) => {
  selectTools.value.push(item.id)
  selectToolList.value.push(item);
}

const handleRemove = (item) => {
  const index = selectTools.value.findIndex(id => id == item.id)
  selectTools.value.splice(index, 1)
  selectToolList.value.splice(index, 1)
}
const submit = () => {
  confirmSelectToolList.value = JSON.parse(JSON.stringify(selectToolList.value));
  visible.value = false;
  props.form.toolList = selectTools.value.map(item => ({id: item}))
  emit('submit', confirmSelectToolList.value)
}

const init = () => {
  if (props.form.toolList) {
    selectTools.value = props.form.toolList.map(item => item.id)
    confirmSelectToolList.value = JSON.parse(JSON.stringify(props.form.toolList));
    selectToolList.value = JSON.parse(JSON.stringify(props.form.toolList));
  }
}

defineExpose({
  init
})

</script>
<style lang="scss" scoped>
.knowledge-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  .knowledge-item {
    width: calc(50% - 10px);
    margin-bottom: 10px;
    border-radius: 8px;
    padding: 10px;
    box-shadow: rgba(16, 24, 40, 0.1) 0px 4px 8px -2px, rgba(16, 24, 40, 0.06) 0px 2px 4px -2px;
    border: 1px solid rgb(223, 226, 234);
    cursor: pointer;
  }
}
.tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  max-height: 600px;
  overflow-y: auto;
}
.tool-item {
  width: calc(50% - 20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-weight: 600;
}
</style>
